import 'package:country_state_city/models/country.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'country_logic.dart';

class CountryPage extends StatelessWidget {
  CountryPage({super.key});

  final logic = Get.put(CountryLogic());
  final state = Get.find<CountryLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: BackBtnIcon(onTap: () => {Get.back()}),
          centerTitle: true,
          title: Text(LocaleKeys.settings_world_time.ts,
              style: TextStyle(fontSize: 54.sp)),
        ),
        body: Stack(
          children: [
            Column(
              children: [
                Expanded(
                    child: SingleChildScrollView(
                      child: _buildBody(),
                    )),
                SizedBox(height: 10.h),
              ],
            ),
            GetBuilder<CountryLogic>(
              init: logic,
              id: "loading_item",
              builder: (CountryLogic controller) {
                return Offstage(
                  offstage: !state.isLoading,
                  child: Center(
                    child: LoadingAnimationWidget.staggeredDotsWave(
                      color: const Color(0xffff6630),
                      size: 50,
                    ),
                  ),
                );
              },
            )
          ],
        ));
  }

  _buildBody() {
    return Padding(
      padding: EdgeInsets.only(left: 43.w, right: 43.w, top: 90.h),
      child: Column(
        children: [
          GetBuilder<CountryLogic>(
            id: "list_view",
            init: logic,
            builder: (CountryLogic controller) {
              return ListView.builder(
                controller: ScrollController(),
                shrinkWrap: true,
                itemCount: state.countriesList.length,
                itemBuilder: (context, index) => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: 120.h,
                      child: Padding(
                        padding: EdgeInsets.symmetric(vertical: 30.h),
                        child: Text(
                          state.countriesList[index].section,
                          style: TextStyle(
                              fontSize: 42.sp, color: const Color(0xff434343)),
                        ),
                      ),
                    ),
                    ListView.separated(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: state.countriesList[index].countries.length,
                      itemBuilder: (context, index2) => Ink(
                        decoration: BoxDecoration(
                          color: Colors.white70.withOpacity(0.9),
                          borderRadius: BorderRadius.circular(60.r),
                        ),
                        child: InkResponse(
                          splashColor: ColorConst.activeColor,
                          borderRadius: BorderRadius.circular(8),
                          highlightShape: BoxShape.rectangle,
                          highlightColor: ColorConst.activeColor,
                          containedInkWell: true,
                          child: Container(
                            padding: EdgeInsets.only(left: 60.w, right: 10.w),
                            height: 175.h,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  state.countriesList[index].countries[index2].name,
                                  style: TextStyle(
                                      fontSize: 42.sp,
                                      color: const Color(0xff434343)),
                                ),
                                _showCheckBox(
                                    state.countriesList[index].countries[index2]),
                              ],
                            ),
                          ),
                          onTap: ()=> {
                            logic.onCountrySelected(state.countriesList[index].countries[index2])
                          },
                        ),
                      ),
                      separatorBuilder: (BuildContext context, int index) {
                        return SizedBox(height: 40.h);
                      },
                    ),
                  ],
                ),
              );
            },
          ),
          SizedBox(height: 60.h)
        ],
      ),
    );
  }

  Widget _showCheckBox(Country country) {
    if (state.selectedCountryCode == country.isoCode) {
      return Checkbox(
        activeColor: Colors.red,
        value: state.selectedCountryCode == country.isoCode,
        onChanged: (value) => logic.onCountrySelected(country),
        shape: const CircleBorder(),
      );
    } else {
      return Container();
    }
  }
}
